<template>
    <div class="attribute-wrapper">
        <DataGrid :auto-load="autoLoad" border ref="tableRef" :pagination="false">
            <template #toolbar-search>
                <div class="query-from-box">
                    <el-form :model="queryData">
                        <el-form-item>
                            <el-input v-model="queryData.attributeName" placeholder="属性名称/标识符" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="queryData.objectName" placeholder="所属产品/组件" clearable />
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <el-table-column type="index" label="序号" width="60" align="center" fixed />
            <el-table-column label="属性名称" fixed show-overflow-tooltip>
                <template #default="{ row }">
                    <el-link type="primary" :underline="false" @click="onViewItem(row)">{{ row.displayName }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="attributeName" label="标识符" show-overflow-tooltip />
            <el-table-column prop="showName" label="所属产品/组件" />
            <el-table-column label="数据类型">
                <template #default="{ row }">
                    {{ attributeTypeList?.[row.typeName]?.displayName || 'N/A' }}
                </template>
            </el-table-column>
        </DataGrid>
    </div>
</template>
<script setup lang="ts">
import { IoTProductService } from '@great/services';
import type { SysMetadataThingEvent, SysMetadataObject } from '@great/services';
import { thingEventType } from '@/utils/constant';
import { DataGrid, type DataGridInstance } from '@great/components';
import { showPopupBox } from '@great/utils';
import AttributeFormModal from '@/pages/model/thing/components/detail/thingModel/components/AttributeFormModal.vue';

const modelDetail = inject<any>('productDetail')?.value;
const attributeTypeList = inject<any>('AttributeTypeList');
const props = defineProps<{
    detailData?: SysMetadataObject;
}>();
// 查询条件
const queryData = ref({
    queryObjectName: props.detailData?.objectName,
    attributeName: '',
    objectName: ''
});
const tableRef = useTemplateRef<DataGridInstance>('tableRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await IoTProductService.getThingAttributePage({
            ...queryData.value
        });
        return { data: res.data };
    }
});
function onViewItem(row: any) {
    showPopupBox(AttributeFormModal, {
        readOnly: true,
        modelDetail,
        detail: row,
        attributeTypeList: attributeTypeList.value,
        callback: tableRef.value?.refresh
    });
}
</script>
<style scoped lang="scss">
.attribute-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
}
</style>
